/*
  学习目标：React中的列表渲染-类似v-for
  列表渲染-数组渲染： 数组的map方法
 
*/

import React from 'react';
import ReactDOM from 'react-dom';

// 数组
const list = ['温柔', '倔强', '私奔到月球']; // [<h1>温柔</h1>, <h1>倔强</h1>]
const list2 = [<h1>温柔</h1>, <h1>倔强</h1>]; // []

// 注意：
// 💥列表一定要加key
// 💥key口诀：有id用id，没id用索引
const divNode = (
  <div>
    {/* 列表渲染 */}
    {list.map((item, index) => {
      return <h1 key={index}>{item}</h1>;
    })}

    {/* 列表渲染 */}
    {list2}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
